<template>
  <button
    :class="[
      buttonSize ? `el-button--${buttonSize}` : '',
      buttonType ? `el-button--${buttonType}` : '',
      round ? `is-round` : ''
    ]"
  >
    <slot></slot>
  </button>
</template>
<script lang="ts">
export default {
  name: 'ElButton'
}
</script>
<script setup lang="ts">
import { withDefaults, computed } from 'vue'
import { useGlobalConfig } from '../../utils/util.ts'
import { sizeEnums, typeEnums } from '@/enums/global'

interface Props {
  size?: sizeEnums
  type?: typeEnums
  round?: boolean
}
const globalConfig = useGlobalConfig()
const props = withDefaults(defineProps<Props>(), {
  size: undefined,
  type: undefined,
  round: false
})

const buttonType = computed(() => {
  return props.type || globalConfig?.type
})
const buttonSize = computed(() => {
  return props.size || globalConfig?.size
})
</script>

<style lang="scss" scoped>
@import '@/styles/mixin';

@include b(button) {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  font-weight: $--button-font-weight;
  line-height: 1;
  color: $--button-default-font-color;
  text-align: center;
  white-space: nowrap;
  appearance: none;
  cursor: pointer;
  background: $--button-default-background-color;
  border: $--border-base;
  border-color: $--button-default-border-color;
  outline: none;

  & + & {
    margin-left: 10px;
  }

  @include button-size(
    $--button-padding-vertical,
    $--button-padding-horizontal,
    $--button-font-size,
    $--button-border-radius
  );

  @include m(default) {
    @include button-size(
      $--button-medium-padding-vertical,
      $--button-medium-padding-horizontal,
      $--button-medium-font-size,
      $--button-medium-border-radius
    );
  }

  @include m(small) {
    @include button-size(
      $--button-small-padding-vertical,
      $--button-small-padding-horizontal,
      $--button-small-font-size,
      $--button-small-border-radius
    );
  }

  @include m(large) {
    @include button-size(
      $--button-large-padding-vertical,
      $--button-large-padding-horizontal,
      $--button-large-font-size,
      $--button-large-border-radius
    );
  }

  @include m(primary) {
    @include button-variant(
      $--button-primary-font-color,
      $--button-primary-background-color,
      $--button-primary-border-color
    );
  }

  @include m(success) {
    @include button-variant(
      $--button-success-font-color,
      $--button-success-background-color,
      $--button-success-border-color
    );
  }

  @include m(danger) {
    @include button-variant(
      $--button-danger-font-color,
      $--button-danger-background-color,
      $--button-danger-border-color
    );
  }

  @include m(warning) {
    @include button-variant(
      $--button-warning-font-color,
      $--button-warning-background-color,
      $--button-warning-border-color
    );
  }
}
</style>
